<template>
	<el-dialog title="代付配置" v-model="visible" :close-on-click-modal="false" draggable width="680px">
		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="180px" v-loading="loading">
			<el-row :gutter="24">
				<el-col :span="24" class="mb-4">
					<el-form-item label="单位名称">
						<div>{{ rowInfo?.name }}</div>
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb-4">
					<el-form-item label="代付状态" prop="deliveryMethod">
						<el-radio-group class="ml-4" v-model="form.deliveryMethod">
							<el-radio :label="10">关闭</el-radio>
							<el-radio :label="20">开启</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20">
					<el-form-item label="代付类型" prop="paymentType">
						<el-radio-group class="ml-4" v-model="form.paymentType">
							<el-radio :label="10">短信和语音</el-radio>
							<el-radio :label="20">短信</el-radio>
							<el-radio :label="30">语音</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 20">
					<el-form-item label="语音总限制(分钟)" prop="ttsTotalLimit">
						<template #label>
							<label> <span class="text-error">*</span> 语音总限制(分钟)</label>
						</template>

						<div class="flex items-center">
							<el-input-number
								:controls="false"
								v-model="form.ttsTotalLimit"
								:min="0"
								:max="99999"
								class="!w-[200px]"
								:precision="0"
								:value-on-clear="0"
								:disabled="form.checkStatus_ttsTotalLimit === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_ttsTotalLimit" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 20">
					<el-form-item label="语音日限(分钟)" prop="ttsSumDay">
						<div class="flex items-center">
							<el-input-number
								:controls="false"
								v-model="form.ttsSumDay"
								:min="0"
								:precision="0"
								:value-on-clear="0"
								:disabled="form.checkStatus_ttsSumDay === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_ttsSumDay" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 20">
					<el-form-item label="语音月限(分钟)" prop="ttsSumMonth">
						<div class="flex items-center">
							<el-input-number
								:controls="false"
								v-model="form.ttsSumMonth"
								:min="0"
								:precision="0"
								:value-on-clear="0"
								:disabled="form.checkStatus_ttsSumMonth === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_ttsSumMonth" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="18" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 20">
					<el-form-item label="语音代付截止时间" prop="ttsExpirationDate">
						<el-date-picker
							type="datetime"
							v-model="form.ttsExpirationDate"
							placeholder="选择语音代付截止时间"
							:disabled-date="handleDisabledDate"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 30">
					<el-form-item label="短信总限制(条)" prop="smsTotalLimit">
						<template #label>
							<label> <span class="text-error">*</span> 短信总限制(条)</label>
						</template>
						<div class="flex items-center">
							<el-input-number
								:controls="false"
								class="!w-[200px]"
								v-model="form.smsTotalLimit"
								:min="0"
								:precision="0"
								:max="99999"
								:value-on-clear="0"
								:disabled="form.checkStatus_smsTotalLimit === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_smsTotalLimit" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 30">
					<el-form-item label="短信日限(条)" prop="smsSumDay">
						<div class="flex items-center">
							<el-input-number
								:controls="false"
								v-model="form.smsSumDay"
								:min="0"
								:precision="0"
								:value-on-clear="0"
								:disabled="form.checkStatus_smsSumDay === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_smsSumDay" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 30">
					<el-form-item label="短信月限(条)" prop="smsSumMonth">
						<div class="flex items-center">
							<el-input-number
								:controls="false"
								v-model="form.smsSumMonth"
								:min="0"
								:precision="0"
								:value-on-clear="0"
								:disabled="form.checkStatus_smsSumMonth === 20"
							/>
							<el-checkbox class="ml-1" v-model="form.checkStatus_smsSumMonth" :true-label="20" :false-label="10" border>不限制</el-checkbox>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="18" class="mb-4" v-if="form.deliveryMethod === 20 && form.paymentType !== 30">
					<el-form-item label="短信代付截止时间" prop="smsExpirationDate">
						<el-date-picker
							type="datetime"
							v-model="form.smsExpirationDate"
							value-format="YYYY-MM-DD HH:mm:ss"
							placeholder="选择短信代付截止时间"
							:disabled-date="handleDisabledDate"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="单位范围" prop="deptLimit">
						<el-radio-group class="ml-4" v-model="form.deptLimit" :disabled="true">
							<el-radio :label="10">本级及子级</el-radio>
							<el-radio :label="20">仅本级</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="PaySetDialog">
import { useMessage } from '/@/hooks/message';
import { paying } from '/@/api/tariff/basicExpensesDeptDetail';
import { validateNull } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const rowInfo = ref();
// 定义字典

// 提交表单数据
const form = reactive({
	id: '',
	deptId: '',
	deliveryMethod: 20,
	paymentType: 10,
	ttsTotalLimit: 0,
	ttsSumDay: 0,
	ttsSumMonth: 0,
	checkStatus_ttsTotalLimit: 10,
	checkStatus_ttsSumDay: 10,
	checkStatus_ttsSumMonth: 10,
	checkStatus_smsTotalLimit: 10,
	checkStatus_smsSumDay: 10,
	checkStatus_smsSumMonth: 10,
	ttsExpirationDate: '',
	smsTotalLimit: 0,
	smsSumDay: 0,
	smsExpirationDate: '',
	smsSumMonth: 0,
	deptLimit: 20,
});

// 定义校验规则
const dataRules = ref({
	ttsTotalLimit: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_ttsTotalLimit === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	smsTotalLimit: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_smsTotalLimit === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	ttsSumDay: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_ttsSumDay === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	ttsSumMonth: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_ttsSumMonth === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	smsSumDay: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_smsSumDay === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	smsSumMonth: [
		{
			validator: (r: any, value: any, callback: any) => {
				if (form.checkStatus_smsSumMonth === 10) {
					if (validateNull(value) || value > 99999) callback(new Error('请输入0-99999的正整数'));
				}
				callback();
			},
		},
	],
	ttsExpirationDate: [{ required: true, message: '选择语音代付截止日期', trigger: 'change' }],
	smsExpirationDate: [{ required: true, message: '选择短信代付截止日期', trigger: 'change' }],
});

// 打开弹窗
const openDialog = (row: any) => {
	visible.value = true;
	rowInfo.value = row;
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		const infinite = 999999;
		const infiniteObj = {
			ttsTotalLimit: form.checkStatus_ttsTotalLimit === 20 ? infinite : form.ttsTotalLimit,
			ttsSumDay: form.checkStatus_ttsSumDay === 20 ? infinite : form.ttsSumDay,
			ttsSumMonth: form.checkStatus_ttsSumMonth === 20 ? infinite : form.ttsSumMonth,
			smsTotalLimit: form.checkStatus_smsTotalLimit === 20 ? infinite : form.smsTotalLimit,
			smsSumDay: form.checkStatus_smsSumDay === 20 ? infinite : form.smsSumDay,
			smsSumMonth: form.checkStatus_smsSumMonth === 20 ? infinite : form.smsSumMonth,
			deptId: rowInfo.value.deptId,
		};
		const params = Object.assign({}, form, infiniteObj);
		await paying(params);
		useMessage().success('代付配置成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};
// 日期禁用
const handleDisabledDate = (date: Date) => {
	if (new Date(date).getTime() > new Date().getTime()) return false;
	return true;
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
